<template>
  <view class="brand">
    <view class="input_bgc">
      <u-input class="input" v-model="value" placeholder="输入名称或条形码搜索" placeholderStyle="color: #7e7f81 " />
      <view class="btn">
        <u-icon name="scan"></u-icon>
      </view>
    </view>

    <picker mode="multiSelector" v-model="show" :default-selector='["都宝", "黄山  (红方印金中支)"]' :range="multiSelector"
      @change="pickerMul($event)" @columnchange="bindMultiPickerColumnChange">
      <view class="content_padding">
        <view class="select">
          <view class="left_text">请选择品牌</view>
          <view class="right_btn" @click="show = true">
            <view>请选择</view>
            <view>></view>
          </view>
        </view>
      </view>
    </picker>

    <view class="commodity">
      <view class="commodity_item" v-for="(item, index) in dataList" :key="index">
        <view class="title">
          <view>{{ item.title }}</view>
        </view>
        <view class="table">
          <view class="left_img">
            <image src="../../static/logo.png"></image>
          </view>
          <view class="right_text">

            <view class="small_box">
              <view>小盒: </view>
              <view class="text">
                <view class="green_text">普通：{{ item.small.ordinary }}币/个</view>
                <view class="red_text">会员：{{ item.small.member }}币/个</view>
              </view>
            </view>
            <view class="line"></view>

            <view class="small_box">
              <view>条盒: </view>
              <view class="text">
                <view class="green_text">普通：{{ item.strip.ordinary }}币/个</view>
                <view class="red_text">会员：{{ item.strip.member }}币/个</view>
              </view>
            </view>
            <view class="line"></view>

            <view class="small_box">
              <view>小盒码: </view>
              <view class="text">
                {{ item.smallYard }}
              </view>
            </view>
            <view class="line"></view>

            <view class="small_box">
              <view>条盒码: </view>
              <view class="text">
                {{ item.stripYard }}
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>

  </view>


  <!-- <u-mask :show="show" @click="show = false"></u-mask> -->
  <!-- <u-picker mode="time" v-model="show" :params="params"></u-picker> -->

  <!-- <view v-if="show" class="dialog_box" @click.stop="handleClose()">
      <view class="dialog_content" @click.stop="handleSelect">
        <view class="title">请选择品牌</view>
        <view class="line"></view>
        <view class="list_content">

          <view class="f_content">
            <view @click="handleItem(item)" class="f_item" v-for="(item, index) in fList" :key="index">
              {{ item.name }}
            </view>
          </view>

          <view class="line"></view>

          <view class="f_content">
            <view class="s_item" v-for="(item, index) in shouList" :key="index">{{ item }}</view>
          </view>

        </view>
      </view>
    </view> -->
</template>

<script>
export default {
  data() {
    return {
      value: '',
      dataList: [
        {
          title: '黄山 (微商新概念)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
        {
          title: '黄山 (红方印金中支)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
        {
          title: '黄山 (红方印金中支)',
          small: {
            ordinary: '0.48',
            member: '0.96',
          },
          strip: {
            ordinary: '0.95',
            member: '1.96',
          },
          smallYard: 12345678901234,
          stripYard: 12345678901234,
        },
      ],
      show: true, // 遮罩层
      fList: [
        {
          name: '黄山',
          id: 1,
          list: ['黄山  (微商新概念)', '黄山  (红方印金中支)', '黄山  (七星皖烟)']
        },
        {
          name: '芙蓉王',
          id: 2,
          list: ['芙蓉王  (微商新概念)', '芙蓉王  (红方印金中支)']
        },
        {
          name: '都宝',
          id: 3,
          list: ['都宝  (微商新概念)', '都宝  (红方印金中支)']
        },
        {
          name: '利群',
          id: 4,
          list: ['利群  (微商新概念)', '利群  (红方印金中支)']
        },
      ],
      shouList: [],
      multiSelector: [
        ['黄山', '芙蓉王', '都宝'],
        ['黄山  (微商新概念)', '黄山  (红方印金中支)', '黄山  (七星皖烟)']
      ],
      multiIndex: [0, 0],
      list1: []
    }
  },
  methods: {

    handleClose() {
      this.show = false
    },
    handleSelect() {
      // console.log('选择')
    },
    handleItem(item) {
      this.shouList = item.list
    },
    pickerMul(e) { // 选择器
      console.log('ee', e.target.value)
      let v = e.target.value;
      let index1 = v[0];
      let index2 = v[1];

      console.log('选中: 1', this.multiSelector[0][index1], '2', this.multiSelector[1][index2])
    },
    bindMultiPickerColumnChange(e) {
      // console.log('e', e.detail.column, e.detail.value)
      this.multiIndex[e.detail.column] = e.detail.value;

      switch (e.detail.column) {
        case 0: //拖动第1列
          switch (this.multiIndex[0]) {
            case 0:
              this.multiSelector[1] = ['黄山  (微商新概念)', '黄山  (红方印金中支)', '黄山  (七星皖烟)'];
              break;
            case 1:
              this.multiSelector[1] = ['芙蓉王  (微商新概念)', '芙蓉王  (红方印金中支)', '芙蓉王  (七星皖烟)'];
              break;
            case 2:
              this.multiSelector[1] = ['都宝山  (1)', '都宝山  (2)', '都宝山  (3)'];
              break;
          }
          // this.multiIndex.splice(1, 1, 0);
          // this.multiIndex.splice(2, 1, 0);
          break;
      }

    }
  },
  created() {
    this.shouList = this.fList[0].list;
  }
}
</script>

<style scoped lang="scss">
.brand {
  position: relative;

  .dialog_box {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);

    .dialog_content {
      margin: 0 auto;
      margin-top: 20rpx;
      background-color: #fff;
      width: 85%;
      height: 70%;
      border-radius: 20rpx;

      .title {
        display: flex;
        justify-content: center;
        padding: 20rpx 0rpx;

      }

      .line {
        height: 2rpx;
        background-color: #b2b2b2;
        margin-bottom: 20rpx;
      }

      .list_content {
        height: 90%;
        display: flex;

        .f_content {
          padding: 0 10rpx;
        }

        .f_item {
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #b4b4b4;
          padding: 10rpx 20rpx;
          border-radius: 10rpx;
          color: #0e5db4;
        }

        .s_item {
          display: flex;
          /* justify-content: center; */
          align-items: center;
          border: 1px solid #b4b4b4;
          padding: 10rpx 20rpx;
          border-radius: 10rpx;
          color: #3d7d61;
          margin-bottom: 10rpx;
        }

        .line {
          width: 2rpx;
          height: 100%;
          background-color: #b7b7b7;
        }
      }
    }
  }

  .input_bgc {
    display: flex;
    border-top: 4rpx solid #e5e6e8;
    padding: 20rpx;
    background-color: #f7f8fa;

    .input {
      flex: 1;
      background-color: #fff;
      border-top-right-radius: 0rpx;
      border-bottom-right-radius: 0rpx;

      .uni-input-placeholder /deep/ .input-placeholder {
        color: red;
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      background-color: #f9fafc;
      border: 2rpx solid #e5e6e8;
      border-top-right-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
    }
  }

  .content_padding {
    padding: 0rpx 20rpx;
  }

  .select {
    margin-top: 20rpx;
    display: flex;
    align-items: center;

    .right_btn {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding: 10rpx 20rpx;
      margin-left: 20rpx;
      border-radius: 4rpx;
      border: 2rpx solid #e5e5e5;
    }
  }

  .commodity {
    margin-top: 40rpx;
    padding: 0 30rpx;

    .commodity_item {
      /* margin-bottom: 30rpx; */
      /* height: 400rpx; */
      margin-bottom: 40rpx;

      .title {
        color: #17cbed;
        margin-bottom: 10rpx;
      }

      .table {
        display: flex;
        height: 100%;
        border: 2rpx solid #dededc;
        border-radius: 10rpx;
        padding: 10rpx 0rpx;

        .left_img {
          overflow: hidden;
          width: 200rpx;
          height: 100%;

          /* background-color: red; */
          image {
            width: 200rpx;
            height: 300rpx;
          }
        }

        .right_text {
          flex: 1;

          /* background-color: skyblue; */
          .small_box {
            display: flex;
            /* justify-content: space-around; */
            align-items: center;
            margin-left: 30rpx;

            .text {
              margin-left: 30rpx;

              .green_text {
                color: #188a5a;
                font-size: 24rpx;
              }

              .red_text {
                color: #d64459;
                font-size: 24rpx;
                margin-top: 10rpx;
              }
            }
          }

          .line {
            height: 2rpx;
            background-color: #e3e3e3;
            margin: 10rpx 0;
          }
        }
      }
    }
  }
}
</style>
